﻿<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <!-- ../packages/core/main.css -->
    <link href='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=a33ddb94-299a-468b-954c-c090818059f5' rel='stylesheet' />
    <!-- ../packages-premium/timeline/main.css -->
    <link href='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=b0de5030-c8f3-487e-8b2f-7de96399cd37' rel='stylesheet' />
    <!-- ../packages-premium/resource-timeline/main.css -->
    <link href='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=75fc6bd5-8526-45f9-969d-0acfa517f0c2' rel='stylesheet' />
    <!-- ../packages/core/main.js -->
    <script src='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=9a19dc61-9a10-4a21-95e1-98b18ca06a84'></script>
    <!-- ../packages/interaction/main.js -->
    <script src='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=51789154-f7e7-497a-a519-a6f5da19deea'></script>
    <!-- ../packages-premium/timeline/main.js -->
    <script src='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=3adb9cf0-dc4c-4276-affe-a4fd826bb1f0'></script>
    <!-- ../packages-premium/resource-common/main.js -->
    <script src='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=916526dc-6d1d-41cc-996b-8b7284e19250'></script>
    <!-- ../packages-premium/resource-timeline/main.js -->
    <script src='/pwccnhk/gtsventure/Admin/HomePage/DownloadFile?fileIds=f406285f-1a6f-4de2-b3b0-ef899292b891'></script>
    <script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'resourceTimeline' ],
      now: '2019-08-01',
      editable: true,
      aspectRatio: 1.8,
      scrollTime: '00:00',
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'resourceTimelineMonth,resourceTimeline90Day,resourceTimelineYear'
      },
      defaultView: 'resourceTimeline90Day',
      views: {
        resourceTimelineDay: {
          buttonText: ':15 slots',
          slotDuration: '00:15'
        },
        resourceTimelineTenDay: {
          type: 'resourceTimeline',
          duration: { days: 10 },
          buttonText: '10 days'
        },
        resourceTimeline90Day: {
          type: 'resourceTimeline',
          duration: { months: 3 },
          buttonText: '3 months'
        }
      },
      navLinks: true,
      resourceAreaWidth: '25%',
      resourceLabelText: 'Persons',
      resources: [
        { id: 'a', title: 'Demeter Lee', children: [
            { id: 'a1', title: 'Re-platform Global Proposal Library (Sharepoint)', eventColor: 'green' },
            { id: 'a2', title: 'Proposal Source R1.1', eventColor: 'green' }
        ] },
        { id: 'b', title: 'Daphne Wong', children: [
          { id: 'b1', title: 'Re-platform Global Proposal Library (Sharepoint)', eventColor: 'green' },
          { id: 'b2', title: 'Proposal Source R1.1', eventColor: 'green' },
          { id: 'b3', title: 'PwC Virtual Data Room (VDR) - MVP Version', eventColor: 'green' }
        ] },
        { id: 'c', title: 'Dorothy Wong', children: [ { id: 'c', title: 'Re-platform Global Proposal Library (Sharepoint)', eventColor: 'green' } ] },
        { id: 'd', title: 'Jimmy Ip', children: [ { id: 'd', title: 'Re-platform Global Proposal Library (Sharepoint)', eventColor: 'green' } ] },
        { id: 'e', title: 'Fanny Lui', children: [ { id: 'e', title: 'Re-platform Global Proposal Library (Sharepoint)', eventColor: 'green' } ] },
        { id: 'f', title: 'Auditorium C', children: [ { id: 'f', title: 'Re-platform Global Proposal Library (Sharepoint)', eventColor: 'green' } ] }
      ],
      events: [
        { id: '1', resourceId: 'a', start: '2019-08-01T02:00:00', end: '2019-08-07T07:00:00', title: 'event 1' },
        { id: '2', resourceId: 'a1', start: '2019-08-01T02:00:00', end: '2019-08-04T07:00:00', title: 'event 2' },
        { id: '3', resourceId: 'a2', start: '2019-08-04T02:00:00', end: '2019-08-07T07:00:00', title: 'event 3' },
        { id: '4', resourceId: 'b', start: '2019-08-04T05:00:00', end: '2019-08-09T22:00:00', title: 'event 4' },
        { id: '5', resourceId: 'b1', start: '2019-08-04', end: '2019-08-08', title: 'event 5' },
        { id: '6', resourceId: 'b2', start: '2019-08-08T03:00:00', end: '2019-08-09T08:00:00', title: 'event 6' },
        { id: '7', resourceId: 'b3', start: '2019-08-07T00:30:00', end: '2019-08-07T02:30:00', title: 'event 7' },
        { id: '8', resourceId: 'c', start: '2019-08-01T00:30:00', end: '2019-08-04T02:30:00', title: 'event 8' },
        { id: '9', resourceId: 'd', start: '2019-08-04T00:30:00', end: '2019-08-07T02:30:00', title: 'event 9' },
        { id: '10', resourceId: 'e', start: '2019-08-04T00:30:00', end: '2019-08-07T02:30:00', title: 'event 10' },
        { id: '11', resourceId: 'f', start: '2019-08-07', end: '2019-08-14', title: 'event 11' }
      ]
    });

    calendar.render();
  });

  /* $("tr['data-resource-id'=b]").val; abcde */
  var a = Array.prototype.filter.call(
    document.getElementsByTagName('tr'),
    function(el) {return el.getAttribute('data-resource-id') == 'b';}
  );

  console.log("a:"+a);

    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 50px auto;
        }

        .fc-resized-row {
            height: 48px !important;
        }
    </style>
</head>
<body>
    <br>
    <center>
        <table width=70% border=0 style="background-color:white" cellspacing="10">
            <tr>
                <td>
                    Product :
                    <select>
                        <option value="product01">Digital Maker</option>
                        <option value="product02">DMS</option>
                        <option value="product03">GTS Venture</option>
                        <option value="product04">Smart Office</option>
                    </select>

                    Project :
                    <select>
                        <option value="project01">PwC Thailand Janus</option>
                        <option value="project02">Merck MBooking Phase I</option>
                        <option value="project03">IT Change Management</option>
                        <option value="project04">Faserati Call Centre</option>
                        <option value="project05">PwC TH - 3rd Applications</option>
                        <option value="project06">Proposal Source R1.3</option>
                        <option value="project07">M Visiting - Merck Visitor Management System</option>
                    </select>

                    Person :
                    <select>
                        <option value="team01">Demeter Lee</option>
                        <option value="team02">Daphne Wong</option>
                        <option value="team03">Dorothy Wong</option>
                        <option value="team04">Jimmy Ip</option>
                        <option value="team04">Fanny Lui</option>
                    </select>
                </td>
                <td align="right"><button type="button" onclick="window.location.href = '/pwccnhk/gtsventure/vForm/ResourceBooking/Add';">New Resource Booking</button></td>
                <td align="right"><button type="button" onclick="window.location.href = '/pwccnhk/gtsventure/vForm/ResourceBooking/Add';">Check Resources</button></td>
            </tr>
            <tr>
                <td colspan="3">
                    <div id='calendar'></div>
                </td>
            </tr>

        </table>
    </center>

</body>
</html>
